Component({
    options:{
        // 开启多个插槽模式
        multipleSlots:true
    },
    properties: {
      //1 传入一个数组，按数组元素内容渲染我们的标签页选项
        tabs:{
//制定属性接受的参数类型
type:Array,
//指定默认值
value:[],
        }
    },
    data: {
currentTabIndex:0
    },
    methods: {

// 2 能够监听点击事件，并且能够使用组件的页面或者父组件，我们选择了什么
//通用组件
 // 动态切换点击事件
 handleTabChange:function(event){
    // console.log(event)
    //查看控制台可以知道获取index的是curretTarget里的dataset里面
 const index=event.currentTarget.dataset.index
 //当我们的index等于当前绑定了的标签下标 直接ruturn
 if(index === this.data.currentTabIndex){
     return
 }
 //高内聚 低耦合
 //数据绑定
 this.setData({
   currentTabIndex:index
 })
 //发起自定义事件 第一个参数是名字 第二个是传递的参数 要触发时候回xtml
 this.triggerEvent('change',{index})
},

//手指触摸滑动事件 wxs调用这个函数
hanldeTOuchMove(event){
console.log(event);
//看控制台 转换出来是0 1 -1
const direction=event.direction
//把当前的标签页下标取出来
const currentTabIndex=this.data.currentTabIndex
//转换 目标的标签索引
const targetTabIndex=currentTabIndex + direction

//做判断  满足条件 return终止
if(targetTabIndex < 0 || targetTabIndex > this.data.tabs.length-1){
    return 
}
const customEvent={
   
        currentTarget:{
            dataset:{
                index:targetTabIndex
            }
        }
    }
    this.handleTabChange(customEvent)
}
},
    
});
